import React from 'react';

/* 样式 */
import styles from './Login.module.scss';

/* 引入antd */
import { Form, Input, Button } from 'antd';

/* 引入icon图标 */
import { UserOutlined, LockOutlined } from '@ant-design/icons';

/* 引入上下文 */
import useStore from '../../context/useStore';

/* 从React Router v5.1.0开始，新增了useHistory钩子（hook），如果是使用React >16.8.0，编写以下函数组件，使用useHistory即可实现编程时页面跳转导航。 */
import { useHistory } from 'react-router-dom';


export default function Login() {
    /* 使用钩子 */
    let history = useHistory();
    let { user } = useStore();

    const onFinish = async (values: any) => {
        /*  console.log('Success:', values); */

        /* 点击登录，发送请求 */
        await user.loginAction(values.user_name, values.user_pwd);

        /* 跳转页面 */
        history.replace('/home');
    };

    return (
        <div className={styles.login_box}>
            <div className={styles.login}>
                {/* initialValues  是默认值
                name:表单名字
                onFinish:表单提交失败触发的回调
            */}
                <div className={styles.title}>登录</div>
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    {/* name:源生属性
                    rules:表单校验规则,
                    pattern:正则校验
                    validateTrigger:设置字段校验的时机
                */}
                    <Form.Item
                        label="Username"
                        name="user_name"
                        rules={[{ pattern: /^[A-z]{4,16}$/, message: '用户名由4-16位的大小写字母组成!' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="user_pwd"
                        rules={[{ pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*!&.]).*$/, message: '密码由大小写字母、数字、特殊字符组成!' }]}
                    >
                        <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                    </Form.Item>

                    <Form.Item>
                        {/* htmlType="submit" 是form表单的提交 */}
                        <Button type="primary" htmlType="submit">
                            登录
                    </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}